<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules">
      <el-form-item label="图片换脸接口：" prop="picChangeFace">
        <el-radio-group v-model="form.picChangeFace">
          <el-radio :label="1">阿里({{ content.picChangeFaceAliCount }}次)</el-radio>
          <el-radio :label="2">火山({{ content.picChangeFaceHuoshanCount }}次)</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="视频换脸接口：" prop="videoChangeFace">
        <el-radio-group v-model="form.videoChangeFace">
          <el-radio :label="0">自动
            <el-tooltip class="item" effect="dark" content="1分钟以内视频用火山，超过则用阿里。" placement="top-start">
              <i class="el-icon-question" color="#666"></i>
            </el-tooltip>
          </el-radio>
          <el-radio :label="1">阿里({{ content.videoChangeFaceAliCount }}次)</el-radio>
          <el-radio :label="2">火山({{ content.videoChangeFaceHuoshanCount }}次)</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div>
      <el-button type="primary" @click="handleSubmit">保存</el-button>
    </div>
  </div>
</template>
<script>
  import { getPublicDetail, savePublicDetail, getInterfaceUseStatistics } from '@/api/shuiyin/shuiyin.js'
  export default {
    data() {
      return {
        form: {},
        rules: {
          picChangeFace: [
            { required: true, message: '请选择图片换脸接口', trigger: 'change' }
          ],
          videoChangeFace: [
            { required: true, message: '请选择视频换脸接口', trigger: 'change' }
          ]
        },
        content: {}
      }
    },
    created() {
      this.getDetail();
      this.getUseCount();
    },
    methods: {
      getDetail() {
        getPublicDetail().then(response => {
          if (response.status === 200 && response.data) {
            this.form = {
              id: response.data.id,
              picChangeFace: response.data.picChangeFace,
              videoChangeFace: response.data.videoChangeFace
            }
          } else {
            this.form = {
              picChangeFace: 1,
              videoChangeFace: 0
            }
          }
        })
      },

      getUseCount() {
        getInterfaceUseStatistics().then(response => {
          this.content = response.data;
        })
      },

      handleSubmit() {
        this.$refs['form'].validate(valid => {
          if (valid) {
            savePublicDetail(this.form).then(res => {
              this.$modal.msgSuccess('修改成功');
              this.getDetail()
            })
          }
        })
      }
    }
  }
</script>